<template > 
    <div class="box"> 
        <div class="header">
            <div class="w1200 clear">
                <div @click = "menuClick({id:1,url:''},0)" class="logo"><img :src="configInfo.logo"></div>
                <div v-if="isToken" class="exit" @click = "exit()">
                    退出登录
                </div>
                <p class="tel">客服电话：{{ configInfo.kf }}</p>
                <div class="navs">
                    <div style="cursor: pointer;" @click.stop = "menuClick(menu,idx)"  class="a" v-for="(menu,idx) in menuList" :key = "idx">
                        {{ menu.name }}
                        <!-- <i ></i> -->
                        <span v-show="activeMenu == menu.id" class="icon"></span>
                    </div>
                </div>
            </div>
            
            
        </div>
    </div>
</template>
<script>
import { bus }  from '../main.js';
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
    export default {
        name: "tem",
        mixins: [pagePublic],
        props:{
            configInfo:{
                type:Object,
                default(){
                    return {}
                }
            },
           
        },
        data(){
            return{
                isToken:false,
                activeMenu:1,
                menuList: [
                    {
                        id: 1,
                        name: "首页",
                        url: "/home"
                    },
                    {
                        id: 2,
                        name: "试听专区",
                        url: "/audition"
                    },
                    {
                        id: 3,
                        name: "选课专区",
                        url: "/course"
                    },
                    {
                        id: 4,
                        name: "题库专区",
                        url: "/subjectBank"
                    },
                    // {
                    //     id: 5,
                    //     name: "师资阵容",
                    //     url: "/home"
                    // },
                    // {
                    //     id: 7,
                    //     name: "学习中心",
                    //     url: "/school"
                    // },
                    {
                        id: 8,
                        name: "学习中心",
                        url: "/study"
                    },
                    {
                        id: 6,
                        name: "帮助中心",
                        url: "/help"
                    }
                ],
                
                // urls:{
                //     list:()=>{
                //         return {
                //             url:this.$store.state.urls.list,
                //             method:"get",
                //             sync:false,
                //         }
                //     },
                //     add:this.$api.tem.add,
                //     edit:this.$api.tem.edit,
                //     del:this.$api.tem.del
                // },

                
            }
        },
        watch:{
            $route(val){
                console.log(val,'7654gyhbnkj');
                console.log(this.$store.state.token,233333)
                if(localStorage.getItem('token')){
                    this.isToken = true
                }else{
                    this.isToken = false
                }
                if(val.path){
                    let idx = this.menuList.map(e=>{
                        if(e.name == "/test"){
                            localStorage.setItem("activeMenu",8)
                            return 
                        }
                        if(e.name == val.path){
                            localStorage.setItem("activeMenu",e.id)
                        }else{
                            localStorage.setItem("activeMenu",1)
                        }
                    })

                }
            }
        },
        created() {
            let it = localStorage.getItem("activeMenu");
            if(it){
                this.activeMenu = it;
            }
        },
        methods:{
            ...mapMutations(['set_token']),
            menuClick(m,i){
                this.activeMenu = m.id
                localStorage.setItem("activeMenu",m.id)
                let paths = {
                    path:m.url,
                    query:{}
                }
                if(m.id == 5&&this.$route.fullPath == '/home'){
                    bus.$emit('scrollToSection',1)
                    return
                }
                if(m.id == 7){
                    window.open('http://new.zhongchenjiaoyu.com/school/login')
                    return 
                    // paths.query['src'] = 'http://new.zhongchenjiaoyu.com/school/login'
                }
                if(paths.path){
                    this.$router.push(paths)
                }
                
            },
            exit(){
                this.$router.push('/login')
                localStorage.removeItem("activeMenu")
                this.set_token('')
                localStorage.removeItem("token")
            }
        }
    }
</script>
<style lang="scss" scoped>

    .exit{
        // position: absolute;
        // right: 10px;
        // top: 10px;
        float: right;
        font-size: 20px;
        color: #fff;
        background-color: var(--bg-color);
        padding: 5px 20px;
        margin-top: 21px;
        cursor: pointer;
        border-radius: 40px;
        line-height: 22px;
        font-size: 16px;
        // height: 40px;
        margin-left: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .header{width:100%; height:80px; background:#fff;}
	.header .logo{display: block; width:188px; height:60px; margin:10px 0; float:left;}
	.header .logo img{height: 100%;}
	.header .navs{display: flex; float:right; padding-top:26px;}
	.header .navs .a{display: inline-block; font-size:18px; margin:0 20px; display:block; float:left;}
	.header .navs .a .icon{ display:block; width:20px; height:5px; background:url(../assets/image/choose_nav.png); margin:8px auto; }

	.header .navs .a i{ width:20px; height:5px; background:url(../assets/image/choose_nav.png); margin:8px auto; display:none;}
	.header .navs .a:hover .icon{display:block;}
	.header .navs .a:active i{display:block;}	
	.header .tel{float:right; color:var(--bg-color,'#FF6900'); line-height:22px; padding-top:26px; font-size:16px;}
	.header .tel:before{content:''; display:block; width:22px; height:22px; background:url(../assets/image/top_tel.png); background-size:100%; float:left; margin-right:6px;}
</style>